<template>
  <div class="bon">
    <div class="ClassifyView">
   
      <div class="category" v-for="(item,index) in lists" :key="index">
        <div class="title">
          <span></span>{{item.title}}
        </div>

        <div class="bookbox">
                <router-link tag="div" to="/FictionContent" class="item"  v-for="(i,x) in item.book" :key="x">
                    <p>{{i.name}}</p>
                    <img :src="i.img" alt="">
                </router-link>

              
            </div>
      </div>

      



      <div class="footer">
            <p class="link">
                <a href="">小说首页</a>
                <span>|</span>
                <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.kmxs.reader">手机客户端</a>
                <span>|</span>
                <a href="#xtopjsinfo" class="go_top">返回顶部</a>
            </p>

            <p class="link">
                <a href="">问题反馈</a>
                <span>|</span>
                <a href="#xtopjsinfo" class="go_top">版权声明</a>
            </p>

            <p class="link">
                <a href="">若发现不良信息,请您告知客服,客服QQ:3284839587</a>
            </p>

            <p class="link">
                <a href=""> <i> 版权所有 ©km.com All Rights Reserved</i>  沪ICP备16039144号-1</a>
            </p>


        </div>


      


      

   
  

    </div>
  </div>
</template>

<script>
import {getimgData} from"../api/home.js"
export default {
  data(){
    return{
      lists:null,
    }
  },
  created(){
    getimgData().then(data=>{
      // console.log(data)
      // console.log(data.data)
      this.lists = data.data
    })
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.ClassifyView{
  .nav {
    display: flex;
    justify-content: space-around;
    background-color: #ffda33;
    a {
      height: 40px;
      line-height: 40px;
      justify-content: space-around;
      font-size: 18px;
      color: #666666;
      padding: 0 16px;
     
    }
    // .con{
    //     color: #ff9744;
    //   border-bottom: 2px solid #ff9744;
    // }
    .router-link-active {
      color: #ff9744;
      border-bottom: 2px solid #ff9744;
    }
  }

  .header {
  height: 58px;
  display: flex;
  justify-content: space-between;
align-items: center;
  // padding-top: 2px;
  background-color: #ffffff;
  padding-left: 14px;
  padding-right: 14px;
  // margin-right: 10px;

  .caption {
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }

  .person {
    width: 20px;
    height: 20px;
    .icon {
      width: 20px;
      height: 20px;
    }
  }

  // .headerbox {
  //   text-align: center;
  //   border-radius: 20px;
  //   padding-left: 14px;
  //   padding-right: 14px;
  //   margin-right: 10px;
  //   &:nth-child(1) {
  //     margin-right: 20px;
  //     background-color: #ffa55b;
  //     a {
  //       color: #ffffff;
  //     }
  //   }
  //   &:nth-child(2) {
  //     background-color: #ffffff;
  //     border: 1px solid #ffa55b;
  //   }
  //   a {
  //     color: #ffae6b;
  //     height: 34px;
  //     line-height: 34px;
  //     font-size: 16px;
  //   }
  // }
}
  .navbox {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background-color: #ffda33;
    .box {
      a {
        color: #000;
        font-size: 20px;
        &.con {
          border-bottom: 3px solid #fca000;
        }
      }
    }
  }
  .typebox {
    display: flex;
    margin-top: 10px;
    justify-content: space-evenly;
    .type {
      margin-right: 10px;
      a {
        font-size: 10px;
        padding: 8px 12px;
        background-color: #898989;
        color: #f2f2f2;
        border-radius: 50px;
        &.con {
          background-color: #fed21b;
          color: #000;
        }
      }
    }
  }

  .category{
    background-color: #ffffff;
    padding: 16px 0px;
    margin-bottom: 6px;
    .title{
      display: flex;
      color: #000;
      font-size: 14px;
      padding-left: 10px;
      font-weight: bold;
align-items: center;
padding-bottom:10px;

      span{
        width: 4px;
        height: 16px;
        background-color: #1abc9c;
        margin-right:8px ;
        border-radius: 6px;
      }
    }
    .bookbox{
      display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .item{
      display: flex;
    /* margin-right: 16px; */
    width: 43%;
    height: 80px;
    background-color: #f7f7f7;
    justify-content: space-around;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 10px;
    img{
    width: auto;
    height: 60px;
    }
    }
    }
  }

  .footer {
    margin-top: 34px;
    background-color: #ffffff;
    padding-top: 2px;
    .link {
      display: flex;
      justify-content: center;
      margin: 6px 6px;
      a {
        color: #999999;
        font-size: 14px;
      }
      i {
        color: #999999;
        font-size: 10px;
      }
      span {
        margin: 0 7px;
        color: #999999;
        font-size: 12px;
        list-style: none;
      }
      &:nth-child(4) {
        padding-top: 6px;
        padding-bottom: 14px;
      }
    }
  }

}

</style>